<template>
	<view class="acitvity_details safe_area">
		<image :src="info?.cover" class="acitvity_details_img"></image>
		<image class="acitvity_details_status" src="http://qianxueapplet.suoeryun.com/notStarted.png"
			v-if="info?.activityStatus === '1'"></image>
		<image class="acitvity_details_status"
			src="https://qianxunyanxue-applet.obs.cn-north-4.myhuaweicloud.coms/inProgress.png"
			v-else-if="info?.activityStatus === '2'"></image>
		<image class="acitvity_details_status" src="http://qianxueapplet.suoeryun.com/ended.png"
			v-else-if="info?.activityStatus === '3'">
		</image>
		<view class="acitvity_details_header">
			<view class="acitvity_details_header_title">{{info?.activityName}}</view>
			<view class="acitvity_details_header_tag" v-if="info?.lable">
				<text v-for="tag in info?.lable?.split(',')" :key="tag">#{{tag}}</text>
			</view>
			<view class="acitvity_details_header_btm">
				<view>{{info?.number??0}}人参与活动</view>
				<view @click="handleDetail">活动详情 <u-icon name="arrow-right" color="999999" size="12"></u-icon></view>
			</view>
			<!-- <view class="acitvity_details_header_btn">
				<view @click="handleclick('pages/index/videoSet','1','图集')">
					<image src="http://qianxueapplet.suoeryun.com/atlas.png"></image>
					<text>图集</text>
				</view>
				<view @click="handleclick('pages/index/videoSet','2','视频集')">
					<image src="http://qianxueapplet.suoeryun.com/videoCollection.png"></image>
					<text>视频集</text>
				</view>
			</view> -->
		</view>
		<!-- 图集/视频集 -->
		<u-tabs :list="tabList" @click="handleTabClick" lineColor="#FF943C" :activeStyle="{
        color: '#FF943C',
    }" :inactiveStyle="{
        color: '#000000',
    }"></u-tabs>
		<view class="acitvity_details_video">
			<template v-if="tabType === '1'">
				<image :src="item?.url" v-for="(item,index) in dataSouse" :key="item?.id"
					@click="handleclick('pages/index/videoSet','1','图集',index)" mode="aspectFill"></image>
				<u-empty v-if="!dataSouse.length" marginTop="20" text="暂无图片"
					icon="http://qianxueapplet.suoeryun.com/tp.png" width="90"></u-empty>
			</template>
			<template v-if="tabType === '2'">
				<image :src="item?.poster" v-for="(item,index) in dataSouse" :key="item?.id"
					@click="handleclick('pages/index/videoSet','2','视频集',index)" mode="aspectFill"></image>
				<u-empty v-if="!dataSouse.length" marginTop="20" text="暂无视频"
					icon="http://qianxueapplet.suoeryun.com/sp.png" width="90"></u-empty>
			</template>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</view>
		<!-- 底部按钮 -->
		<view class="acitvity_details_btn safe_area">
			<view @click="handleLike">
				<image src="http://qianxueapplet.suoeryun.com/like.png" v-if="info?.izLike === '0'"></image>
				<image src="http://qianxueapplet.suoeryun.com/likeSelect.png" v-else>
				</image>
				<text>{{info?.likes}}</text>
			</view>
			<view @click="handleComments">
				<image src="http://qianxueapplet.suoeryun.com/comments.png"></image>
				<text>{{info?.comment}}</text>
			</view>
			<view @click="handleShare">
				<image src="http://qianxueapplet.suoeryun.com/forward.png"></image>
				<text>{{info?.relay}}</text>
			</view>
			<view @click="handleCollect">
				<image src="http://qianxueapplet.suoeryun.com/collectSelected.png" v-if="info?.isCollect"></image>
				<image src="http://qianxueapplet.suoeryun.com/collect.png" v-else></image>
				<text>{{info?.collect}}</text>
			</view>
			<button open-type="contact">
				<image src="http://qianxueapplet.suoeryun.com/service.png"></image>
				<text>客服</text>
			</button>
		</view>
	</view>

	<!-- 评论 -->
	<comment ref="commentRef" @close="handleCommentClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>
	<view style="position: fixed;"></view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
	import { qxActivityManageQueryById, addLikes, updateActivityNum, qxCommentCollectEdit, qxActivityMediaList } from '@/config/index.api';
	import { ref, reactive, unref, onBeforeUnmount } from "vue";
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";

	const info = ref();
	const commentRef = ref();
	const shareRef = ref();

	const tabList = [{ name: '图集', type: '1' }, { name: '视频集', type: '2' }];
	const tabType = ref('1');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	const dataSouse = ref([]);
	const status = ref('loadmore');

	onLoad(async (params) => {
		console.log(params, 'params');
		info.value = params;
		loadData();
		loadImgVideoData();
	})

	/**
	 * 页面滚动到底部的事件
	 */
	onReachBottom(() => {
		scrolltolower();
	})

	onShow(() => {
	})

	onBeforeUnmount(() => {
		commentRef.value.handleClose()
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		const res = await qxActivityManageQueryById({ id: info.value?.id });
		console.log(res, 'res');
		info.value = { ...unref(info), ...res };
		// 消息点进来显示评论数据
		if (unref(info)?.orderId) {
			//type 1 活动 2图集 3视频
			commentRef.value.handleShow({ activityId: info.value?.id, num: info.value?.comment ?? 0, belongId: info.value?.id, type: '1', orderId: unref(info)?.orderId });
		}
	}

	/**
	 * 加载图集/视频集数据
	 */
	async function loadImgVideoData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await qxActivityMediaList({ ...pagination, activityId: info.value?.id, type: unref(tabType) });
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}


	/**
	 * 分享
	 */
	// onShareAppMessage(async (res) => {
	// 	console.log(res, '123');
	// 	await updateActivityNum({ operationType: '2', activityId: info.value?.id, });
	// 	// loadData();
	// 	return {
	// 		title: info.value?.activityName,
	// 		path: `/pages/index/acitvityDetails?id=${info.value?.id}`
	// 	}
	// })

	/**
	 * 点赞
	 */
	function handleLike() {
		uni.$u.throttle(async function () {
			await addLikes({ activityId: info.value?.id });
			uni.showToast({
				icon: 'none',
				title: info.value?.izLike === '0' ? '点赞成功!' : '取消点赞！'
			})
			loadData();
		}, 1000)
	}

	/**
	 * 评论
	 */
	function handleComments() {
		//type 1 活动 2图集 3视频
		commentRef.value.handleShow({ activityId: info.value?.id, num: info.value?.comment ?? 0, belongId: info.value?.id, type: '1' });
	}

	/**
	 * 评论回调
	 */
	function handleCommentClose(num) {
		uni.showTabBar();
		info.value.comment = num;
	}

	/**
	 * 分享
	 */
	function handleShare() {
		const item = unref(info);
		shareRef.value.handleShow({ path: 'pages/index/acitvityDetails', scene: `id=${item?.id}`, activityId: item?.id, title: item?.activityName });
	}

	/**
	 * 收藏
	 */
	function handleCollect() {
		uni.$u.throttle(async function () {
			await qxCommentCollectEdit({ collectType: '1', collectId: info.value?.id, isCollect: info.value?.isCollect });
			info.value.collect = (info.value.isCollect ? info.value.collect - 1 : info.value.collect + 1);
			// console.log(info.value.isCollect ? info.value.collect-- : info.value.collect++);
			info.value.isCollect = !info.value.isCollect;
			uni.showToast({
				icon: 'none',
				title: info.value.isCollect ? '收藏成功' : '取消收藏'
			})
		}, 1000)
	}

	/**
	 * 图集/视频跳转
	 */
	function handleclick(path, type, title, current) {
		uni.$u.route(path, {
			id: info.value?.id,
			activityName: info.value?.activityName,
			type,
			title,
			current
		});
	}

	/**
	 * 详情
	 */
	function handleDetail() {
		uni.$u.route('/pages/index/acitvityDetails', {
			id: info.value?.id
		});
	}

	/**
	 * tabs 切换监听
	 */
	function handleTabClick(item) {
		console.log(item, 'item');
		tabType.value = item?.type;
		pagination.pageNo = 1;
		loadImgVideoData();
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadImgVideoData();
		}
	}
</script>

<style lang="scss" scoped>
	.acitvity_details {
		position: relative;

		.acitvity_details_img {
			width: 100%;
			height: 390rpx;
			display: block;
		}

		.acitvity_details_status {
			position: absolute;
			top: 0;
			right: 0;
			width: 170rpx;
			height: 170rpx;
		}

		.acitvity_details_header {
			padding: 32rpx 24rpx 24rpx 24rpx;
			background-color: #ffffff;

			.acitvity_details_header_title {
				font-size: 40rpx;
				font-weight: 600;
			}

			.acitvity_details_header_tag {
				margin: 12rpx 0 0 0;

				text {
					border-radius: 192rpx;
					background: #FCF2EE;
					padding: 6rpx 18rpx;
					display: inline-block;
					font-size: 26rpx;
					color: #BC6C60;
					margin-right: 20rpx;
					margin-top: 14rpx;
					font-weight: 550;
					margin-bottom: 12rpx;
				}
			}

			.acitvity_details_header_btm {
				padding-top: 22rpx;
				font-size: 28rpx;
				display: flex;
				color: #999999;
				justify-content: space-between;
				align-items: center;

				&>view {
					&:nth-child(2) {
						display: flex;
						align-items: center;

						::v-deep .u-icon {
							margin-left: 8rpx;
						}
					}
				}
			}

		}

		::v-deep .u-tabs {
			margin-top: 20rpx;
			background-color: #ffffff;
			border-bottom: 1rpx solid #3333331a;
		}

		.acitvity_details_video {
			background-color: #ffffff;
			padding: 24rpx 0 24rpx 24rpx;
			margin-bottom: 134rpx;

			image {
				width: 31.5%;
				height: 224rpx;
				margin-right: 10rpx;
				// margin-bottom: 10rpx;
			}
		}

		.acitvity_details_btn {
			// height: 88rpx;
			display: flex;
			width: 100%;
			position: fixed;
			bottom: 0;
			justify-content: space-around;
			background-color: #ffffff;
			padding-top: 16rpx;

			&>view,
			&>button {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0;
				background-color: transparent;
				padding: 0;
				// height: 88rpx;
				line-height: 40rpx;

				&::after {
					border: 0;
					height: auto;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 28rpx;
					color: #8C8C8C;
					display: inline-block;
					padding-bottom: 8rpx;
				}
			}
		}
	}
</style>